<template>
  <div class="electricity-dashboard">
    <h1 class="dashboard-title">
      <span>电价信息面板</span>
      <el-button type="primary" size="small" @click="showAddPriceDialog">添加电价</el-button>
    </h1>

    <!-- 第一个卡片：电价时段图表 -->
    <el-card class="dashboard-card" shadow="hover">
      <template #header>
        <span>最新电价时段分布</span>
        <el-button type="primary" size="small" @click="showPriceConfigDialog">设置电价</el-button>
      </template>
      <ElectricityPriceChart :prices="priceData" :hours="hourData" :labels="labelTexts" :price-unit="priceUnit"
        :custom-colors="colorScheme" />
    </el-card>

    <!-- 第二个卡片：电价变化趋势图 - 移除了查看选项下拉菜单 -->
    <el-card class="dashboard-card" shadow="hover">
      <template #header>
        <span>尖峰平谷电价变化趋势</span>
      </template>
      <StepChart :chart-data="priceHistoryChartData" title="" height="350px" :show-toolbox="true" legend-position="top"
        @point-click="handleChartPointClick" />
    </el-card>

    <!-- 电价配置对话框 -->
    <el-dialog v-model="priceConfigDialogVisible" title="电价配置设置" :before-close="closePriceConfigDialog">
      <PriceSelector :initial-prices="priceData" :initial-hours="hourData" :initial-date="getCurrentDate()"
        @update-price-settings="updatePriceSettings" />
    </el-dialog>

    <!-- 添加电价对话框 -->
    <el-dialog v-model="addPriceDialogVisible" title="添加电价" :before-close="closeAddPriceDialog">
      <PriceSelector :initial-prices="defaultPriceData" :initial-hours="defaultHourData"
        :initial-date="getCurrentDate()" @update-price-settings="addNewPriceSettings" />
    </el-dialog>

    <!-- 历史价格修改对话框 -->
    <el-dialog v-model="historyEditDialogVisible" :title="'修改历史电价 - ' + editPriceForm.date">
      <PriceSelector :initial-prices="editPriceForm.prices" :initial-hours="editPriceForm.hours"
        :initial-date="editPriceForm.effectiveDate" @update-price-settings="updateHistoricalPrice" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ArrowDown } from '@element-plus/icons-vue';
import StepChart from '../../../../../components/chart/BaseStepChart.vue';
import ElectricityPriceChart from './components/ElectricityPriceChart.vue';
import PriceSelector from './components/PriceSelector.vue';


// 电价数据
const priceData = ref({
  sharp: '1.20000', // 尖时电价
  peak: '0.81865',  // 峰时电价
  normal: '0.53257', // 平时电价
  valley: '0.24649'  // 谷时电价
});

// 时段小时数据
const hourData = reactive({
  sharpHours: [19, 20], // 尖时段，例如晚上7点到9点
  peakHours: [8, 9, 10, 11, 16, 17, 18, 21],
  normalHours: [7, 12, 13, 14, 22, 23],
  valleyHours: [0, 1, 2, 3, 4, 5, 6, 15]
});

// 添加电价用的默认数据
const defaultPriceData = ref({
  sharp: '1.20000',
  peak: '0.81865',
  normal: '0.53257',
  valley: '0.24649'
});

// 添加电价用的默认时段数据
const defaultHourData = reactive({
  sharpHours: [19, 20],
  peakHours: [8, 9, 10, 11, 16, 17, 18, 21],
  normalHours: [7, 12, 13, 14, 22, 23],
  valleyHours: [0, 1, 2, 3, 4, 5, 6, 15]
});

// 自定义标签
const labelTexts = reactive({
  sharp: '尖',
  peak: '峰',
  normal: '平',
  valley: '谷'
});

// 价格单位
const priceUnit = ref('元/kWh');

// 自定义颜色
const colorScheme = reactive({
  sharp: '#FF5252', // 红色
  peak: '#ffc107',  // 黄色
  normal: '#63c5da', // 蓝色
  valley: '#4caf50'  // 绿色
});

// 历史价格数据 - 包含完整的时段小时信息
const priceHistoryData = ref([]);

// 对话框状态
const priceConfigDialogVisible = ref(false);
const historyEditDialogVisible = ref(false);
const addPriceDialogVisible = ref(false);

// 编辑价格表单 - 修改为适配PriceSelector的数据结构
const editPriceForm = reactive({
  date: '',
  effectiveDate: '',
  prices: {
    sharp: '',
    peak: '',
    normal: '',
    valley: ''
  },
  hours: {
    sharpHours: [],
    peakHours: [],
    normalHours: [],
    valleyHours: []
  }
});

// 显示电价配置对话框
const showPriceConfigDialog = () => {
  priceConfigDialogVisible.value = true;
};

// 关闭电价配置对话框
const closePriceConfigDialog = () => {
  priceConfigDialogVisible.value = false;
};

// 显示添加电价对话框
const showAddPriceDialog = () => {
  // 重置表单为默认值
  resetAddPriceForm();
  addPriceDialogVisible.value = true;
};

// 关闭添加电价对话框
const closeAddPriceDialog = () => {
  addPriceDialogVisible.value = false;
};

// 重置添加电价表单
const resetAddPriceForm = () => {
  // 使用最新的价格数据作为默认值
  defaultPriceData.value = { ...priceData.value };

  // 复制当前的时段设置作为默认值
  defaultHourData.sharpHours = [...hourData.sharpHours];
  defaultHourData.peakHours = [...hourData.peakHours];
  defaultHourData.normalHours = [...hourData.normalHours];
  defaultHourData.valleyHours = [...hourData.valleyHours];
};

// 获取当前日期的YYYY-MM-DD格式
const getCurrentDate = () => {
  const now = new Date();
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
};

// 添加新电价设置
const addNewPriceSettings = (data) => {
  // 确保data中包含日期
  if (!data.date) {
    ElMessage.error('添加电价失败：未指定日期');
    return;
  }

  // 检查是否已存在该日期的记录
  const existingRecordIndex = priceHistoryData.value.findIndex(item => item.date === data.date);

  if (existingRecordIndex >= 0) {
    // 如果存在相同日期的记录，提示用户是否覆盖
    ElMessageBox.confirm(
      `${data.date} 的电价记录已存在，是否要覆盖？`,
      '确认覆盖',
      {
        confirmButtonText: '覆盖',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        // 用户确认覆盖
        updateExistingPriceRecord(existingRecordIndex, data);
        addPriceDialogVisible.value = false;
        ElMessage.success(`已更新 ${data.date} 的电价配置`);
      })
      .catch(() => {
        // 用户取消操作
        ElMessage.info('已取消覆盖操作');
      });
  } else {
    // 如果不存在，直接添加新记录
    addNewPriceRecord(data);
    addPriceDialogVisible.value = false;
    ElMessage.success(`已添加 ${data.date} 的电价配置`);
  }
};

// 更新已存在的价格记录
const updateExistingPriceRecord = (index, data) => {
  // 更新已存在的记录
  priceHistoryData.value[index] = {
    ...priceHistoryData.value[index],
    date: data.date,
    effectiveDate: data.date,
    sharp: parseFloat(data.prices.sharp),
    peak: parseFloat(data.prices.peak),
    normal: parseFloat(data.prices.normal),
    valley: parseFloat(data.prices.valley),
    hours: { ...data.hours }
  };

  // 如果更新的是最新日期，则更新当前显示的价格
  updateCurrentPriceIfNeeded();
};

// 添加新价格记录
const addNewPriceRecord = (data) => {
  // 添加新记录
  priceHistoryData.value.push({
    date: data.date,
    effectiveDate: data.date,
    sharp: parseFloat(data.prices.sharp),
    peak: parseFloat(data.prices.peak),
    normal: parseFloat(data.prices.normal),
    valley: parseFloat(data.prices.valley),
    hours: { ...data.hours }
  });

  // 按日期排序
  priceHistoryData.value.sort((a, b) => a.date.localeCompare(b.date));

  // 更新当前显示的价格（如果添加的是最新日期）
  updateCurrentPriceIfNeeded();
};

// 检查并更新当前显示的价格（如果必要）
const updateCurrentPriceIfNeeded = () => {
  // 找出最新的记录
  if (priceHistoryData.value.length > 0) {
    const latestRecord = [...priceHistoryData.value].sort((a, b) =>
      b.date.localeCompare(a.date)
    )[0];

    // 更新当前显示的价格为最新记录的价格
    priceData.value = {
      sharp: latestRecord.sharp.toString(),
      peak: latestRecord.peak.toString(),
      normal: latestRecord.normal.toString(),
      valley: latestRecord.valley.toString()
    };

    // 更新时段
    if (latestRecord.hours) {
      Object.keys(latestRecord.hours).forEach(key => {
        hourData[key] = [...latestRecord.hours[key]];
      });
    }
  }
};

// 更新价格设置
const updatePriceSettings = (data) => {
  // 更新当前价格
  priceData.value = { ...data.prices };

  // 更新时段
  Object.keys(data.hours).forEach(key => {
    hourData[key] = [...data.hours[key]];
  });

  // 添加新的历史记录，使用传入的日期而不是当前日期
  addPriceHistoryRecord(data.date);

  // 关闭对话框
  priceConfigDialogVisible.value = false;

  ElMessage.success('电价配置已更新');
};

// 添加价格历史记录
const addPriceHistoryRecord = (dateStr) => {
  // 如果没有提供日期，使用当前日期
  if (!dateStr) {
    const now = new Date();
    dateStr = now.toISOString().substring(0, 10); // YYYY-MM-DD
  }

  // 检查是否已存在当天的记录
  const existingRecordIndex = priceHistoryData.value.findIndex(item => item.date === dateStr);

  if (existingRecordIndex >= 0) {
    // 如果存在当天记录，则更新它
    priceHistoryData.value[existingRecordIndex] = {
      ...priceHistoryData.value[existingRecordIndex],
      sharp: parseFloat(priceData.value.sharp),
      peak: parseFloat(priceData.value.peak),
      normal: parseFloat(priceData.value.normal),
      valley: parseFloat(priceData.value.valley),
      hours: {
        sharpHours: [...hourData.sharpHours],
        peakHours: [...hourData.peakHours],
        normalHours: [...hourData.normalHours],
        valleyHours: [...hourData.valleyHours]
      }
    };
    ElMessage.success(`已更新${dateStr}的电价配置`);
  } else {
    // 如果不存在当天记录，则添加新记录
    priceHistoryData.value.push({
      date: dateStr,
      effectiveDate: dateStr,
      sharp: parseFloat(priceData.value.sharp),
      peak: parseFloat(priceData.value.peak),
      normal: parseFloat(priceData.value.normal),
      valley: parseFloat(priceData.value.valley),
      hours: {
        sharpHours: [...hourData.sharpHours],
        peakHours: [...hourData.peakHours],
        normalHours: [...hourData.normalHours],
        valleyHours: [...hourData.valleyHours]
      }
    });
    ElMessage.success(`已保存${dateStr}的电价配置`);
  }

  // 按日期排序
  priceHistoryData.value.sort((a, b) => a.date.localeCompare(b.date));
};

// 处理图表点击事件 - 修改为提供PriceSelector需要的数据结构
const handleChartPointClick = (params) => {
  if (params.componentType === 'series' && params.seriesType === 'line') {
    const pointIndex = params.dataIndex;

    // 检查是否是最后一个"至今"点，跳过处理
    if (pointIndex === priceHistoryData.value.length) {
      return; // 最后一个"至今"点，不处理
    }

    if (pointIndex >= 0 && pointIndex < priceHistoryData.value.length) {
      const pointData = priceHistoryData.value[pointIndex];

      // 直接使用日期作为显示
      const displayDate = new Date(pointData.date);

      // 更新表单
      editPriceForm.date = formatDateForDisplay(displayDate);
      editPriceForm.effectiveDate = pointData.date; // 使用原始日期格式

      // 设置价格
      editPriceForm.prices = {
        sharp: pointData.sharp.toString(),
        peak: pointData.peak.toString(),
        normal: pointData.normal.toString(),
        valley: pointData.valley.toString()
      };

      // 设置时段小时
      // 如果历史数据中有小时信息，则使用它
      if (pointData.hours) {
        editPriceForm.hours = JSON.parse(JSON.stringify(pointData.hours));
      } else {
        // 否则使用当前的小时设置（这是为了向后兼容旧数据）
        editPriceForm.hours = {
          sharpHours: [...hourData.sharpHours],
          peakHours: [...hourData.peakHours],
          normalHours: [...hourData.normalHours],
          valleyHours: [...hourData.valleyHours]
        };
      }

      historyEditDialogVisible.value = true;
    }
  }
};

// 更新历史价格数据 - 修改为接收PriceSelector返回的数据结构
const updateHistoricalPrice = (data) => {
  const existingIndex = priceHistoryData.value.findIndex(item => item.date === editPriceForm.effectiveDate);

  if (existingIndex >= 0) {
    // 使用PriceSelector返回的数据更新历史记录，允许更新日期
    const oldDate = priceHistoryData.value[existingIndex].date;
    const newDate = data.date || oldDate; // 使用新日期，如果没有提供则使用旧日期

    priceHistoryData.value[existingIndex] = {
      ...priceHistoryData.value[existingIndex],
      date: newDate,
      effectiveDate: newDate,
      sharp: parseFloat(data.prices.sharp),
      peak: parseFloat(data.prices.peak),
      normal: parseFloat(data.prices.normal),
      valley: parseFloat(data.prices.valley),
      hours: { ...data.hours }  // 保存小时设置
    };

    // 重新排序记录（以防日期被修改）
    priceHistoryData.value.sort((a, b) => a.date.localeCompare(b.date));

    // 如果是最新的记录，更新当前显示的价格和时段设置
    updateCurrentPriceIfNeeded();

    ElMessage.success('历史价格数据已更新');
  }

  historyEditDialogVisible.value = false;
};

// 格式化日期为显示格式
const formatDateForDisplay = (date) => {
  return date.getFullYear() + '年' +
    (date.getMonth() + 1).toString().padStart(2, '0') + '月' +
    date.getDate().toString().padStart(2, '0') + '日';
};

// 计算图表数据 - 不再使用chartVisibleSeries过滤，始终显示所有系列，并添加"至今"点
const priceHistoryChartData = computed(() => {
  // 获取历史数据的日期
  const xAxisData = priceHistoryData.value.map(item => item.date);

  // 在x轴添加"至今"的标签
  xAxisData.push('至今');

  // 准备各时段电价数据
  const sharpData = priceHistoryData.value.map(item => item.sharp);
  const peakData = priceHistoryData.value.map(item => item.peak);
  const normalData = priceHistoryData.value.map(item => item.normal);
  const valleyData = priceHistoryData.value.map(item => item.valley);

  // 为每个系列添加最后一个点的数据（与最后一个价格相同）
  if (sharpData.length > 0) sharpData.push(sharpData[sharpData.length - 1]);
  if (peakData.length > 0) peakData.push(peakData[peakData.length - 1]);
  if (normalData.length > 0) normalData.push(normalData[normalData.length - 1]);
  if (valleyData.length > 0) valleyData.push(valleyData[valleyData.length - 1]);

  // 定义所有系列
  const series = [
    {
      name: '尖时电价',
      type: 'line',
      step: 'end',
      data: sharpData,
      itemStyle: {
        color: colorScheme.sharp
      }
    },
    {
      name: '峰时电价',
      type: 'line',
      step: 'end',
      data: peakData,
      itemStyle: {
        color: colorScheme.peak
      }
    },
    {
      name: '平时电价',
      type: 'line',
      step: 'end',
      data: normalData,
      itemStyle: {
        color: colorScheme.normal
      }
    },
    {
      name: '谷时电价',
      type: 'line',
      step: 'end',
      data: valleyData,
      itemStyle: {
        color: colorScheme.valley
      }
    }
  ];

  return {
    xAxisData,
    series
  };
});

// 生成模拟的历史价格数据
const generateMockPriceHistory = () => {
  const history = [];
  const now = new Date();

  // 生成不规则间隔的历史数据
  const dates = [
    new Date(now.getFullYear() - 2, 3, 15),  // 2年前的4月15日
    new Date(now.getFullYear() - 1, 6, 22),  // 1年前的7月22日
    new Date(now.getFullYear() - 1, 11, 5),  // 1年前的12月5日
    new Date(now.getFullYear(), 2, 10),      // 今年3月10日
    new Date(now)                            // 今天
  ];

  // 基础价格
  let baseSharp = 1.00;
  let basePeak = 0.70;
  let baseNormal = 0.45;
  let baseValley = 0.20;

  // 基础时段设置 - 每条历史记录中的时段小时可能略有不同
  const baseHours = {
    sharpHours: [19, 20],
    peakHours: [8, 9, 10, 11, 16, 17, 18, 21],
    normalHours: [7, 12, 13, 14, 22, 23],
    valleyHours: [0, 1, 2, 3, 4, 5, 6, 15]
  };

  // 为每个日期创建一个价格记录
  for (let i = 0; i < dates.length; i++) {
    const date = dates[i];

    // 价格微调，模拟每次价格调整
    baseSharp += 0.05;
    basePeak += 0.03;
    baseNormal += 0.02;
    baseValley += 0.01;

    // 添加一些随机波动
    const sharpPrice = baseSharp + (Math.random() * 0.02 - 0.01);
    const peakPrice = basePeak + (Math.random() * 0.02 - 0.01);
    const normalPrice = baseNormal + (Math.random() * 0.01 - 0.005);
    const valleyPrice = baseValley + (Math.random() * 0.01 - 0.005);

    // 格式化日期为YYYY-MM-DD
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const dateStr = `${year}-${month}-${day}`;

    // 创建每个时期可能略有不同的时段小时配置
    const historyHours = JSON.parse(JSON.stringify(baseHours));

    // 最后一条记录使用当前时段设置
    if (i === dates.length - 1) {
      historyHours.sharpHours = [...hourData.sharpHours];
      historyHours.peakHours = [...hourData.peakHours];
      historyHours.normalHours = [...hourData.normalHours];
      historyHours.valleyHours = [...hourData.valleyHours];
    }

    history.push({
      date: dateStr,
      effectiveDate: dateStr,
      sharp: parseFloat(sharpPrice.toFixed(5)),
      peak: parseFloat(peakPrice.toFixed(5)),
      normal: parseFloat(normalPrice.toFixed(5)),
      valley: parseFloat(valleyPrice.toFixed(5)),
      hours: historyHours
    });
  }

  priceHistoryData.value = history;

  // 使用最新的价格数据更新当前显示
  const latest = history[history.length - 1];
  priceData.value = {
    sharp: latest.sharp.toString(),
    peak: latest.peak.toString(),
    normal: latest.normal.toString(),
    valley: latest.valley.toString()
  };
};

// 组件挂载时初始化
onMounted(() => {
  // 生成模拟数据
  generateMockPriceHistory();
});
</script>

<style scoped>
.electricity-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gap-normal);
}

.dashboard-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-normal);
}

.dashboard-card {
  margin-bottom: var(--gap-normal);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>